/**
 * SCSS 全局变量定义
 * 定义项目中使用的颜色、字体、间距等样式变量
 */

// ==================== 颜色变量 ====================

// 主色调
$primary-color: #1989fa;
$primary-light: #4dabf7;
$primary-dark: #0c7cd5;

// 辅助色
$success-color: #07c160;
$warning-color: #ff976a;
$danger-color: #ee0a24;
$info-color: #909399;

// 中性色
$white: #ffffff;
$black: #000000;
$gray-1: #f7f8fa;
$gray-2: #f2f3f5;
$gray-3: #ebedf0;
$gray-4: #dcdee0;
$gray-5: #c8c9cc;
$gray-6: #969799;
$gray-7: #646566;
$gray-8: #323233;

// 文本颜色
$text-color: #323233;
$text-color-2: #646566;
$text-color-3: #969799;
$text-color-4: #c8c9cc;

// 背景色
$background-color: #f7f8fa;
$background-color-light: #fafafa;
$background-color-dark: #f2f3f5;

// 边框色
$border-color: #ebedf0;
$border-color-light: #f2f3f5;
$border-color-dark: #dcdee0;

// 阴影色
$shadow-color: rgba(0, 0, 0, 0.1);
$shadow-color-light: rgba(0, 0, 0, 0.05);
$shadow-color-dark: rgba(0, 0, 0, 0.15);

// ==================== 字体变量 ====================

// 字体族
$font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
$font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

// 字体大小
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-xxl: 20px;

// 字体粗细
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;

// 行高
$line-height-xs: 14px;
$line-height-sm: 18px;
$line-height-md: 20px;
$line-height-lg: 22px;
$line-height-xl: 24px;
$line-height-xxl: 28px;

// ==================== 间距变量 ====================

// 基础间距
$padding-base: 4px;
$padding-xs: $padding-base;
$padding-sm: $padding-base * 2;
$padding-md: $padding-base * 3;
$padding-lg: $padding-base * 4;
$padding-xl: $padding-base * 5;
$padding-xxl: $padding-base * 6;

// 边距
$margin-xs: $padding-xs;
$margin-sm: $padding-sm;
$margin-md: $padding-md;
$margin-lg: $padding-lg;
$margin-xl: $padding-xl;
$margin-xxl: $padding-xxl;

// ==================== 圆角变量 ====================

$border-radius-sm: 2px;
$border-radius-md: 4px;
$border-radius-lg: 6px;
$border-radius-xl: 8px;
$border-radius-xxl: 12px;
$border-radius-round: 50%;

// ==================== 边框变量 ====================

$border-width-base: 1px;
$border-style-base: solid;
$border-base: $border-width-base $border-style-base $border-color;

// ==================== 动画变量 ====================

// 动画时长
$animation-duration-fast: 0.2s;
$animation-duration-base: 0.3s;
$animation-duration-slow: 0.5s;

// 动画函数
$animation-timing-function-enter: ease-out;
$animation-timing-function-leave: ease-in;

// ==================== 层级变量 ====================

$z-index-dropdown: 10;
$z-index-sticky: 50;
$z-index-fixed: 100;
$z-index-modal-backdrop: 1000;
$z-index-modal: 1000;
$z-index-popover: 1010;
$z-index-tooltip: 1020;
$z-index-toast: 1030;

// ==================== 布局变量 ====================

// 容器宽度
$container-max-width: 1200px;
$container-padding: 16px;

// 头部高度
$header-height: 46px;
$nav-bar-height: 46px;

// 底部高度
$footer-height: 50px;
$tabbar-height: 50px;

// 侧边栏宽度
$sidebar-width: 200px;
$sidebar-collapsed-width: 64px;

// ==================== 组件变量 ====================

// 按钮
$button-height-large: 50px;
$button-height-normal: 44px;
$button-height-small: 32px;
$button-height-mini: 24px;

// 输入框
$input-height-large: 50px;
$input-height-normal: 44px;
$input-height-small: 32px;
$input-height-mini: 24px;

// 卡片
$card-padding: 16px;
$card-border-radius: $border-radius-lg;
$card-shadow: 0 2px 8px $shadow-color;

// 列表
$list-item-height: 50px;
$list-item-padding: 16px;

// ==================== 响应式断点 ====================

$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1600px;

// ==================== 主题变量 ====================

// 亮色主题
$theme-light: (
  'background': $white,
  'surface': $white,
  'text': $text-color,
  'text-secondary': $text-color-2,
  'border': $border-color,
  'shadow': $shadow-color
);

// 暗色主题
$theme-dark: (
  'background': #1a1a1a,
  'surface': #2d2d2d,
  'text': #ffffff,
  'text-secondary': #cccccc,
  'border': #404040,
  'shadow': rgba(0, 0, 0, 0.3)
);

// ==================== 工具函数 ====================

/**
 * 获取主题变量值
 * @param {string} $key - 变量键名
 * @param {string} $theme - 主题名称，默认为 light
 */
@function theme-var($key, $theme: 'light') {
  $theme-map: if($theme == 'dark', $theme-dark, $theme-light);
  @return map-get($theme-map, $key);
}

/**
 * 响应式媒体查询混入
 * @param {string} $breakpoint - 断点名称
 */
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: #{$breakpoint-xs - 1px}) {
      @content;
    }
  } @else if $breakpoint == sm {
    @media (min-width: #{$breakpoint-sm}) {
      @content;
    }
  } @else if $breakpoint == md {
    @media (min-width: #{$breakpoint-md}) {
      @content;
    }
  } @else if $breakpoint == lg {
    @media (min-width: #{$breakpoint-lg}) {
      @content;
    }
  } @else if $breakpoint == xl {
    @media (min-width: #{$breakpoint-xl}) {
      @content;
    }
  } @else if $breakpoint == xxl {
    @media (min-width: #{$breakpoint-xxl}) {
      @content;
    }
  }
}

/**
 * 文本省略混入
 * @param {number} $lines - 行数，默认为 1
 */
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/**
 * 清除浮动混入
 */
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

/**
 * 居中对齐混入
 * @param {string} $type - 对齐类型：horizontal, vertical, both
 */
@mixin center($type: 'both') {
  position: absolute;
  
  @if $type == 'horizontal' {
    left: 50%;
    transform: translateX(-50%);
  } @else if $type == 'vertical' {
    top: 50%;
    transform: translateY(-50%);
  } @else {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/**
 * Flex 布局混入
 * @param {string} $direction - 方向
 * @param {string} $justify - 主轴对齐
 * @param {string} $align - 交叉轴对齐
 */
@mixin flex($direction: row, $justify: flex-start, $align: stretch) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

/**
 * 阴影混入
 * @param {string} $type - 阴影类型：light, normal, dark
 */
@mixin box-shadow($type: 'normal') {
  @if $type == 'light' {
    box-shadow: 0 1px 3px $shadow-color-light;
  } @else if $type == 'dark' {
    box-shadow: 0 4px 12px $shadow-color-dark;
  } @else {
    box-shadow: 0 2px 8px $shadow-color;
  }
}